<template>
  <div class="home">
    <el-container class="header-container">
      <Header></Header>
    </el-container>
    <el-container class="sibar-container">
      <SideBar></SideBar>
    </el-container>
    <el-container class="main-container">
      <!-- <div class="main-page">
        <Tag></Tag>
        <Main></Main>
      </div> -->
      <Main></Main>
    </el-container>
    <el-container class="footer-container">
      <Footer></Footer>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
//import HelloWorld from "@/components/HelloWorld.vue";
import Header from "@/components/HeaderComponent.vue";
import Footer from "@/components/FooterComponent.vue";
import SideBar from "@/components/SideBarComponent.vue";
import Main from "@/components/MainComponent.vue";
// import Tag from "@/components/Tag.vue";
export default {
  name: "HomeView",
  components: {
    Header,
    Footer,
    SideBar,
    Main,
    //Tag,
  },
};
</script>

<style scoped>
@import url("../assets/css/reset.css");
.home {
  display: flex;
  flex-wrap: nowrap;
  height: 1080px;
  width: 1920px;
}
.header-container {
  display: flex;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1920px;
  height: 70px;
}
.sibar-container {
  display: flex;
  position: absolute;
  top: 70px;
  left: 0px;
  width: 300px;
  height: 940px;
}
.main-container {
  display: flex;
  position: absolute;
  top: 70px;
  left: 300px;
  width: 1620px;
  height: 940px;
  /* background: #66ccff; */
}
.footer-container {
  display: flex;
  position: absolute;
  top: 1010px;
  left: 0px;
  width: 1920px;
  height: 70px;
}
</style>